<head>
    <script src="../build/index.js"></script>
    <style>
        canvas {
            width: 500;
            height: 500;
        }
    </style>
</head>

<body>
    <canvas id="app" style="width: 100%"></canvas>

    <script>
        var $app = new Easycanvas.Painter({
            el: '#app',
            width: 500,
            height: 500
        });

        var $letterG = new Easycanvas.Sprite({
            content: {
                img: Easycanvas.ImgPretreat(
                    'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png',
                    {
                        conversion: function (pixel, x, y) {
                            return {
                                r: x < 80 ? 255 : pixel.r,
                                g: pixel.g,
                                b: pixel.b,
                                a: pixel.a,
                            };
                        }
                    }
                ),
            },
            style: {
                left: 100, top: 100,
            },
        });

        $app.add($letterG);
        $app.start();
    </script>
</body>

